<template>
<div class="package_view">
  <div class="package_view_bac">
    <image class="package_view_bac_img" :src="red_bac" v-if="red_bac != ''"></image>
    <image class="package_view_bac_img" src="~@/static/sports/bac_demo.png" v-if="red_bac == ''"></image>
  </div>
  <div class="package_view_detail">
    <div class="package_view_title">恭喜你获得{{res_cash==0?'实物':'红包'}}</div>
    <div class="package_view_content">
      <div class="package_view_price">
        <div class="package_view_num" :class="{'shiwu':res_cash==0}">
			<image v-if="res_cash==0 && prize.prize.image!='' " class="ic" :src="prize.prize.image" mode="aspectFit"/></image>
			{{ res_cash==0?prize.prize.title:res_cash }}
		</div>
        <div class="package_view_unit" v-if="res_cash!=0">元</div>
      </div>

      <div class="package_view_guide" @click="goBack">
        已存入账户，查看详情
        <image class="package_view_guide_img" src="~@/static/sports/guide.png"></image>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
  name: "packageView",
  computed:{
  	  ...mapGetters(['skinType'])
  },
  data(){
    return{
      res_cash:0,
      red_bac:'',
	  prize:{}
    }
  },
  methods:{
    goBack(){
      uni.navigateBack({})
    }
  },
  mounted() {
	this.prize = uni.getStorageSync('__prize')
  },
  onLoad(op){
    console.info(op.red_bac)
    this.res_cash = op.res_cash
    this.red_bac = op.red_bac
  }
}
</script>

<style scoped lang="scss">
.package_view{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: easeIn 0.5s;
  background: #FFFFFF ;
  z-index: 999;
  overflow: hidden;
  .package_view_bac{
    width: 100%;
    height: 72%;
    border-radius: 60% / 0 0 10% 10%;
    overflow: hidden;
    /*border-bottom: 1rpx soild rgba(246, 218, 172, 1);*/
    .package_view_bac_img{
      width: 100%;
      height: 100%;
    }
  }
  .package_view_detail{
    display: flex;
    flex-direction: column;
    margin: 72rpx 0 0 0;
    align-items: center;
    .package_view_title{
      font-size: 36rpx;
      font-weight: bold;
      color: #222222;
    }
    .package_view_content{
      margin: 20rpx 0 0 0;
      .package_view_price{
        display: flex;
        align-items: flex-end;
        .package_view_num{
          font-size: 104rpx;
          font-weight: bold;
          color: #FF3D4D;
          line-height: 104rpx;
        }
		.shiwu{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 46rpx;
			.ic{
				width: 66rpx!important;
				height: 66rpx !important;
				overflow: hidden;
				margin-right: 18rpx;
			}
		}
        .package_view_unit{
          padding: 0 0 0 8rpx;
          font-size: 26rpx;
          font-weight: 400;
          line-height: 26px;
        }
      }
    }
    .package_view_guide{
      margin: 26rpx 0 0 0;
      display: flex;
      align-items: center;
      font-size: 26rpx;
      font-weight: 400;
      color: #666666;
      .package_view_guide_img{
        width: 16rpx;
        height: 16rpx;
      }
    }
  }
}
@keyframes easeIn {
  0% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0%, 0);
    transform: translate(0%, 0);
    opacity: 1;
  }
}
</style>